<!--{template lyear:header_simple}-->
<div class="container-fluid">
  <div class="card">
    <div class="card-body">
        <ul class="nav nav-pills">
          <li class="nav-item"><a class="nav-link" href="{MOD_URL}"> {lang my_clouds}</a></li>
          <li class="nav-item"> <a class="nav-link" href="{MOD_URL}&op=addcloud">{lang add_clouds}</a> </li>
          <li class="nav-item"> <a class="nav-link active" href="{MOD_URL}&op=oauth&bz=ALIOSS">{lang add_ali_cloud}</a> </li>
        </ul>
    </div>
  </div>
  <div class="card">
        <div class="card-body">
            <form name="aliform" class="form-horizontal" action="{MOD_URL}&op=oauth" method="post" onsubmit="return validate(this)">
              <input type="hidden" name="alisubmit" value="true" />
              <input type="hidden" name="bz" value="ALIOSS" />
              <input type="hidden" name="formhash" value="{FORMHASH}" />
              <div class="row mb-3">
                <label class="col-sm-2" for="access_id">Access Key ID <span class="text-danger">*</span></label>
                <div class="col-sm-10">
                  <input type="text" id="access_id" class="form-control" name="access_id" value="$ali[access_id]" onblur="if(this.value==''){jQuery(this).addClass('is-invalid');}else{jQuery(this).removeClass('is-invalid');}">
                  <span class="form-text">{lang oauth_ALIOSS_ALY_storage}Access Key ID</span> 
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2" for="access_key">Access Key Secret <span class="text-danger">*</span></label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="access_key" name="access_key" value="$ali[access_id]" onblur="if(this.value==''){jQuery(this).addClass('is-invalid');}else{jQuery(this).removeClass('is-invalid');}">
                  <span class="form-text">{lang oauth_ALIOSS_ALY_storage}Access Key Secret</span> 
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2" for="hostname">{lang select_node_address} <span class="text-danger">*</span></label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="hostname" name="hostname" placeholder="oss-cn-beijing.aliyuncs.com" value="$ali[hostname]" onblur="if(this.value==''){jQuery(this).addClass('is-invalid');}else{jQuery(this).removeClass('is-invalid');}">
                  <span class="form-text">{lang oauth_ALIOSS_node17}</span> 
                </div>
              </div>
              <div class="row mb-3">
                <label class="col-sm-2"><a href="javascript:;" onclick="getBucket()">{lang oauth_ALIOSS_click_gain}</a></label>
                <div class="col-sm-10">
                  <select id="bucket" name="bucket" class="form-select" onchange="setBucketHost()"></select>
                  <span class="form-text">{lang oauth_ALIOSS_bucket}</span> 
                </div>
              </div>
              <dl class="mb-3 d-grid">
                  <input type="submit" class="btn btn-primary btn-round bodyloading" value="{lang add}">
              </dl>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
	function setBucketHost() {
		jQuery("#bucket").removeClass('is-invalid');
	}

	function getBucket() {
		var id = jQuery("#access_id").val();
		var key = jQuery("#access_key").val();
    var hostname = jQuery("#hostname").val(); 
		if(id == '' || key == '' || hostname == '') {
      showmessage('请填写完整的信息', 'danger', 3000, 1);
			return;
		}
		jQuery.getJSON('{MOD_URL}&op=oauth&do=getBucket', { id: id, key: key,hostname: hostname }, function(json) {
      console.log(json);
      if(json.length > 0) {
        var html = '';
        for(var i in json) {
          html += '<option value="' + json[i] + '" >' + json[i] + '</option>';
        }
        console.log(html);
        jQuery('#bucket').html(html);
      } else {
        showmessage('没有获取到Bucket列表，请检查ID和Secret是否正确，或该节点地址下是否有Bucket', 'danger', 3000, 1);
      }
    }).fail(function(jqXHR, textStatus, errorThrown) {
      showmessage('获取Bucket列表失败: ' + textStatus, 'danger', 3000, 1);
    });
	}

	function validate(form) {
		if(jQuery("#access_id").val() == '') {
			jQuery("#access_id").addClass('is-invalid');
			return false;
		} else if(jQuery("#access_key").val() == '') {
			jQuery("#access_key").addClass('is-invalid');
			return false;
		} else if(jQuery("#bucket").val() == '') {
			jQuery("#bucket").addClass('is-invalid');
			return false;
		} else if(jQuery("#hostname").val() == '') {
			jQuery("#hostname").addClass('is-invalid');
			return false;
		}
		return true;
	}
</script> 
<!--{template lyear:footer}-->